<template>
	<view class="register-container">
		<!-- 顶部标题 -->
		<view class="header">
			<text class="title">注册账号</text>
			<text class="subtitle">欢迎加入农田小管家</text>
		</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 手机号输入 -->
			<view class="input-group">
				<uni-icons type="phone" size="20" color="#999"></uni-icons>
				<input class="input" type="number" placeholder="请输入手机号" maxlength="11" v-model="phone" />
				<button class="code-btn" :disabled="codeBtnDisabled" @click="getVerificationCode">
					{{ codeBtnText }}
				</button>
			</view>

			<!-- 验证码输入 -->
			<view class="input-group">
				<uni-icons type="locked" size="20" color="#999"></uni-icons>
				<input class="input" type="number" placeholder="请输入验证码" maxlength="6" v-model="code" />
			</view>

			<!-- 密码输入 -->
			<view class="input-group">
				<uni-icons type="locked" size="20" color="#999"></uni-icons>
				<input class="input" :type="showPassword ? 'text' : 'password'" placeholder="请输入密码"
					v-model="password" />
				<uni-icons :type="showPassword ? 'eye' : 'eye-slash'" size="20" color="#999"
					@click="togglePassword"></uni-icons>
			</view>

			<!-- 确认密码 -->
			<view class="input-group">
				<uni-icons type="locked" size="20" color="#999"></uni-icons>
				<input class="input" :type="showConfirmPassword ? 'text' : 'password'" placeholder="请确认密码"
					v-model="confirmPassword" />
				<uni-icons :type="showConfirmPassword ? 'eye' : 'eye-slash'" size="20" color="#999"
					@click="toggleConfirmPassword"></uni-icons>
			</view>

			<!-- 昵称输入 -->
			<view class="input-group">
				<uni-icons type="person" size="20" color="#999"></uni-icons>
				<input class="input" type="text" placeholder="请输入昵称（选填）" v-model="username" />
			</view>
			<text class="nickname-tip">建议使用真实姓名</text>

			<!-- 协议确认 -->
			<view class="agreement">
				<checkbox-group @change="toggleAgreement">
					<checkbox :checked="agreed" color="#4CAF50" />
				</checkbox-group>
				<text class="agreement-text">
					我已阅读并同意
					<text class="link">《用户协议》</text>
					和
					<text class="link">《隐私政策》</text>
				</text>
			</view>

			<!-- 注册按钮 -->
			<button class="register-btn" :disabled="!canRegister" @click="handleRegister">
				立即注册
			</button>
		</view>

		<!-- 底部登录链接 -->
		<view class="footer">
			<text>已有账号？</text>
			<text class="login-link" @click="goToLogin">登录</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	// 表单数据
	const phone = ref(''); //手机号
	const code = ref(''); //
	const password = ref('');
	const confirmPassword = ref('');
	const username = ref('');
	const agreed = ref(false);
	const showPassword = ref(false);
	const showConfirmPassword = ref(false);

	// 消息提示相关
	const msgType = ref('');
	const messageText = ref('');

	// 验证码按钮状态
	const codeBtnDisabled = ref(false);
	const codeBtnText = ref('获取验证码');
	let countdown = 60;

	// 计算属性
	const canRegister = computed(() => {
		return (
			phone.value.length === 11 &&
			code.value.length === 6 &&
			password.value.length >= 6 &&
			password.value === confirmPassword.value &&
			agreed.value
		);
	});

	// 获取验证码
	const getVerificationCode = () => {
		if (phone.value.length !== 11) {
			// msgType.value = 'error';
			// messageText.value = '请输入正确的手机号';
			// $refs.message.open();
			alert("请输入正确的手机号")
			return;
		}

		codeBtnDisabled.value = true;
		const timer = setInterval(() => {
			codeBtnText.value = `${countdown}秒后重新获取`;
			countdown--;

			if (countdown < 0) {
				clearInterval(timer);
				codeBtnText.value = '获取验证码';
				codeBtnDisabled.value = false;
				countdown = 60;
			}
		}, 1000);

		// 模拟发送验证码
		// msgType.value = 'success';
		// messageText.value = '验证码已发送';
		// $refs.message.open();
		alert("验证码已发送")
	};

	// 切换密码显示状态
	const togglePassword = () => {
		showPassword.value = !showPassword.value;
	};

	// 切换确认密码显示状态
	const toggleConfirmPassword = () => {
		showConfirmPassword.value = !showConfirmPassword.value;
	};

	// 切换协议状态
	const toggleAgreement = () => {
		agreed.value = !agreed.value;
	};

	// // 显示用户协议
	// const showUserAgreement = () => {
	// 	uni.navigateTo({
	// 		url: '/pages/agreement/user'
	// 	});
	// };

	// // 显示隐私政策
	// const showPrivacyPolicy = () => {
	// 	uni.navigateTo({
	// 		url: '/pages/agreement/privacy'
	// 	});
	// };

	// 处理注册
	const handleRegister = () => {
		if (!canRegister.value) return;

		//1.验证两次密码是否输入一致
		if (password.value == confirmPassword.value) {
			//证明两次输入一致
			//2.验证当前注册的用户是否存在
			uni.request({
				url: 'http://localhost:3000/users?phone=' + phone.value,
				method: "GET",
				success: (res) => {
					if (res.data.length > 0) {
						//说明有用户，不能注册
						// msgType.value = 'error'
						// messageText.value = '该手机号已注册，请检查'
						// $refs.message.open()
						alert("该手机号已注册,请检查")
					} else {
						//这里才是真正的注册逻辑
						uni.request({
							url: 'http://localhost:3000/users',
							method: "POST",
							data: {
								phone: phone.value,
								password: password.value,
								code: code.value,
								username: username.value
							},
							success: (res) => {
								if (res.statusCode == '201') {
									//注册成功
									// msgType.value = 'success'
									// messageText.value = '注册成功，3秒后跳转登录页'
									// $refs.message.open()
									alert("注册成功，3秒后跳转登录页")
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/login/login'
										});
									}, 3000)
								} else {
									//注册失败
									// msgType.value = 'error'
									// messageText.value = '注册失败，请联系管理员'
									// $refs.message.open()
									alert("注册失败，请联系管理员")
								}
							}
						})
					}
				}
			})
		} else {
			//不一致
			// msgType.value = 'error'
			// messageText.value = '两次输入密码不一致'
			// $refs.message.open()
			alert("两次输入密码不一致")
		}
	};

	// 跳转到登录页
	const goToLogin = () => {
		uni.navigateTo({
			url: '/pages/login/login'
		});
	};

	onLoad(() => {
		// 页面加载时初始化
	});
</script>
<style>
	page {
		height: 100%;
		background-color: #f8f8f8;
	}

	.register-container {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 60rpx 40rpx;
		box-sizing: border-box;
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 80rpx;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
		color: #333;
		margin-bottom: 16rpx;
	}

	.subtitle {
		font-size: 14px;
		color: #999;
	}

	.form-container {
		flex: 1;
		box-sizing: border-box;
		width: 100%;
	}

	.input-group {
		display: flex;
		align-items: center;
		height: 100rpx;
		padding: 0 20rpx;
		margin-bottom: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		border: 1px solid #eee;
	}

	.input {
		flex: 1;
		height: 100%;
		padding: 0 20rpx;
		font-size: 16px;
	}

	.code-btn {
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 14px;
		color: #fff;
		background-color: #4CAF50;
		border-radius: 8rpx;
		margin: 0;
		padding: 0;
	}

	.code-btn[disabled] {
		background-color: #ccc;
	}

	.nickname-tip {
		display: block;
		font-size: 12px;
		color: #999;
		margin-top: -20rpx;
		margin-bottom: 30rpx;
		padding-left: 80rpx;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin: 40rpx 0;
	}

	.agreement-text {
		font-size: 12px;
		color: #666;
		margin-left: 10rpx;
	}

	.link {
		color: #4CAF50;
	}

	.register-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 16px;
		color: #fff;
		background-color: #4CAF50;
		border-radius: 10rpx;
		margin: 0;
	}

	.register-btn[disabled] {
		background-color: #ccc;
	}

	.footer {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		font-size: 14px;
		color: #666;
	}

	.login-link {
		color: #4CAF50;
		margin-left: 10rpx;
	}
</style>